<template>
  <div class="content">
    <div class="information">
      <div class="header" v-text="'提币地址'"></div>
      <div class="group">
        <el-form>
            <el-select  class="choice" v-model="active" placeholder="选择币种">
                <el-option  v-for="item in list" :key="item.id" :label="item.name" :value="item.name" ></el-option>
            </el-select>
            <el-input
            class="site"
            autocomplete='off'
            :placeholder='"提币地址"'
            v-model="toaddress"
          >
          </el-input>
          <el-input v-show="this.active=='XRP'"
            class="site_tag"
            autocomplete='off'
            :placeholder='"XRP标签 Tag"'
            v-model="xrptag"
          >
          </el-input>
          <el-input
            class="site_bz"
            autocomplete='off'
            :placeholder='"备注(如:可生态BTC地址)"'
            v-model="title"
          >
          </el-input>
          <button
            @click="addtoaddress"
            style="margin-top: 1px;"
            class="btn-site"
            v-text="'添加'"
            >
        </button>
        </el-form>
      </div>
    </div>
    <!-- 地址列表 -->
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="地址列表" name="first">
        <el-table
        v-loading='showLoading'
        max-height='500'
        :header-cell-style="{'background-color':'#303030','font-weight':'bold'}"
        :data='myEnstrumentData'
      > 
        <el-table-column
          :label='"币种"' width="150">
          <template slot-scope="scope" >
            {{scope.row.coin}}
          </template>
        </el-table-column>
        <el-table-column
          :label='"提币地址"'>
          <template slot-scope="scope">
            {{scope.row.address}}
          </template>
        </el-table-column>
        <el-table-column
          :label='"添加时间"' width="150">
          <template slot-scope="scope">
            {{scope.row.wdate}}
          </template>
        </el-table-column>
        <el-table-column
          :label='"标题"' width="200">
          <template slot-scope="scope">
            {{scope.row.title}}
          </template>
        </el-table-column>
      </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
export default {
  components: {
  },
  data() {
    return {
        activeName: 'first',
        active:'',
        list:[],
        lists:[],
        toaddress:'',
        title:'',
        xrptag:'',
        showLoading: true,
        myEnstrumentData: []
    };
  },
  mounted() {
    this.getcoinlist();
    this.gettoaddress();
  },
  computed: {
  },
  methods: {
    getcoinlist() {
      this.request(this.api.getcoinlist).then(res => {
        if (res.code == "0") {
          this.list = res.data;
        }
      });
    },
    gettoaddress() {
      this.request(this.api.gettoaddress,{pagesize:'60',pagecode:'1'}).then(res => {
        this.showLoading = false;
        if (res.code == "0") {
          this.myEnstrumentData = res.data;
        }
      });
    },
    addtoaddress() {
      if(!this.active) {
          this.getDataFaild("请选择币种");
          return;
      }
      if(!this.toaddress) {
          this.getDataFaild("请填写地址");
          return;
      }
      if(!this.title) {
          this.getDataFaild("请填写标题");
          return;
      }
      if(this.active=='XRP'){
        if(this.xrptag==""){
            this.getDataFaild("请填写XRP Tag地址");
            return;
        }
      }  
      this.request(this.api.addtoaddress,{coin:this.active,toaddress:this.toaddress,title:this.title,tag:this.xrptag}).then(res => {
        if (res.code == "0") {
          this.successMsg(res.msg || "添加成功");
          this.active = '';
          this.toaddress = '';
          this.title = '';
          this.gettoaddress();
        }else{
          this.getDataFaild("添加失败，请重试");
          return;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.title {
  margin-bottom: 25px;
}
.mt-20 {
  margin-top: 20px;
}
.information {
  .header {
    @include textVcenter;
    padding: 0 15px;
    color: #C1C1C1;
    border-bottom: 1px solid #303030;
    
  }
  .safe-auth {
      padding: 0 15px;
      display:flex;
      display:-webkit-flex;
      justify-content: space-between;
      margin-bottom: 10px;
      li {
        display: inline-block;
        margin: 15px 0;
        span:nth-child(1) {
          color: #717171;
        }
        span:nth-child(2) {
          padding: 0 15px;
          color: #C1C1C1;
        }
        input {
          width: 50px;
          background-color: #0A0A0A;
          color: #C1C1C1;
          padding: 0 15px;
        }
      }
    }
}
.settings {
  .header {
    @include textVcenter;
    padding: 0 15px;
    color: #C1C1C1;
    border-bottom: 1px solid #303030;
  }
  .safe-auth {
      padding:  15px;
      li {
        display: inline-block;
        width: 38%;
        padding: 3%;
        background-color: #313131;
        border-radius: 3px;
        margin: 0 2% 2%;
        >span {
          color: #DBDBDB;
          font-size: 15px;
        }
        >a {
          display: inline-block;
          font-size: 12px;
          color: #F6F7FC;
          float: right;
          padding: 6px 12px;
          background-color: #6A83F7;
          border-radius: 3px;
        }
        >p:nth-child(3) {
          margin: 25px 0 15px;
          span {
            color: #DBDBDB;
            i {
              color: #D6B079;
            }
          }
        }
        >p:nth-child(4) {
          color: #6E6E6E;
        }
      }
    }
}
.table-wrap {
  border: $default-border;
  .header {
    @include textVcenter;
    background: #fcfcfc;
    padding: 0 15px;
    border-bottom: $default-border;
  }
  .safe-auth {
    padding: 0 15px;
    li {
      @include textVcenter;
      padding: 0 0.1%;
      border-top: $default-border;
      &:first-child {
        border-top: none;
      }
      span {
        height: inherit;
        float: left;
        display: block;
        width: 33.3%;
      }
    }
  }
}
.color-dangers {
  color: #5C72D8;
}
.bd-bottom-none {
  border-bottom: none;
}
a,
i {
  &.danger {
    color: $color-danger;
  }
  &.success {
    color: $color-success;
  }
}
.el-table th, .el-table tr {
  display:flex!important;
  display:-webkit-flex!important;
  justify-content: space-between!important;
}
.firsts {
  display:flex;
  display:-webkit-flex;
  justify-content: space-between;
  span {
    color: #595959;
  }
}
.history {
  display:flex;
  display:-webkit-flex;
  justify-content: space-between;
  margin: 15px 0;
  li {
    display: inline-block;
    color: #BEBEBE;
  }
  li:nth-child(4) {
      width: 120px;
  }
  li:nth-child(5) {
      color: #5366BE;
  }
}
.el-tabs__item.is-active {
  color: #DEB77C!important;
}
.group {
    margin: 30px 15px 80px;
    padding: 40px 25px;
    background-color: #313131;
    text-align: center;
}
.choice {
    width: 15%!important;
    display: inline-block;
}
.site {
    width: 35%;
    display: inline-block;
    margin-left: 10px;
}
.site_bz{width: 200px;}
.site_tag{width: 150px;}
.btn-site {
    width: 80px;
    height: 40px;
    background-color: #DFB77C;
    border-radius: 3px;
    color: #fff;
    margin-left: 10px;
}
</style>

